<template>
  <div class="peer-component">
    <div class="app-header">
      <!-- <el-image :src="header" fit="cover" class="status-bar"></el-image> -->
      <!-- <el-image :src="bar" fit="cover" class="bar"></el-image> -->
      <el-image
        :src="coverImgFilter(peerData.coverImage, 'coverImage')"
        fit="contain"
        class="bar"
      ></el-image>
      <div class="card">
        <div class="left">
          <p class="title">{{ peerData.peerTitle | appData('peerTitle') }}</p>
          <div class="time">
            <el-image :src="time" fit="cover" class="time-bg"></el-image>
            <div class="text">
              活动时间 : {{ peerData.timeStart | appData_time('timeStart') }}
              至
              {{ peerData.timeEnd | appData_time('timeEnd') }}
            </div>
          </div>
        </div>
        <div class="right">
          <el-image :src="card_right" fit="cover" class="card-right"></el-image>
          <div class="content">
            <p class="last-name">距报名结束仅剩</p>
            <div class="last-time">
              <span>1天</span>
              <span class="last-time-item">09</span>
              <span>:</span>
              <span class="last-time-item">04</span>
              <span>:</span>
              <span class="last-time-item">59</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="app-content">
      <div class="active">
        <div class="app-content-title">活动奖品</div>
        <ul class="prize_card">
          <li
            :class="{
              prize_list_item: true,
              clear_margin: (index + 1) % 3 === 0,
            }"
            v-for="(item, index) in peerData.activitySeckillList"
            :key="index"
          >
            <el-image :src="prize" fit="cover" class="item-img"></el-image>
            <p class="item-img-text">{{ item.peerNumber }}人组队成功</p>
            <el-image
              :src="getImgUrl(item.peerUrl)"
              fit="scale-down"
              class="prize_bg"
            ></el-image>
            <div class="prize_name">
              <p>{{ item.peerName }}</p>
              <p>X {{ item.peerStock }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="grounp">
        <div class="app-content-title">组队成员</div>
        <div class="active_card">
          <el-image :src="active" fit="cover" class="item-img"></el-image>
          <p class="item-img-text">五人团 *还差 2 人获得飞利浦剃须刀</p>
          <ul class="active_card_content">
            <li
              :class="{
                active_list_item: true,
                clear_margin: (index + 1) % 5 === 0,
              }"
              v-for="(item, index) in prizList"
              :key="index"
            >
              <el-image
                :src="item.url"
                fit="cover"
                class="active-item-img"
              ></el-image>
            </li>
          </ul>
        </div>
      </div>
      <div class="prize">
        <div class="app-content-title">获得奖品</div>
        <div class="prize-content">
          <el-image :src="kong" fit="cover" class="prize-item-img"></el-image>
          <span>暂无奖品</span>
        </div>
      </div>
      <div class="address">
        <div class="app-content-title">活动地点</div>
        <div
          class="address-content"
          v-for="(item, index) in peerData.activityUnit"
          :key="index"
        >
          <p class="name">{{ item.applicableUnit }}</p>
          <p class="address">{{ item.unitAddress }}</p>
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6" class="commodity-list">
              <p class="commodity-list-item-1">1.15km</p>
              <p class="commodity-list-item-2">距离</p>
            </el-col>
            <el-col :span="6">
              <p class="commodity-list-item-1">
                {{ item.serviceConsultant }}人
              </p>
              <p class="commodity-list-item-2">服务顾问</p>
            </el-col>
            <el-col :span="6" class="vertical-center">
              <el-image
                :src="phone"
                fit="cover"
                class="vertical-center-item-1"
              ></el-image>
              <el-image
                :src="address"
                fit="cover"
                class="vertical-center-item-2"
              ></el-image>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="introduce">
        <div class="app-content-title">活动介绍</div>
        <div v-html="peerData.peerContent" class="card_introduce"></div>
      </div>
    </div>
  </div>
</template>

<script>
let defaultData = {
  peerTitle: '一键加油 | 立减20元',
  timeStart: '2021-12-31',
  timeEnd: '2022-12-31',
  inventedEnrollNumber: 100,
  activeAddress: '深圳汇天源科技园店',
  coverImage: require('./peer/header.png'),
  detailImage: null,
  activityUnit: [],
}
export default {
  name: 'peerMobile',
  props: {
    peerData: {
      activeTitle: {
        type: String,
      },
      peerPrice: {
        type: String,
        default() {
          return '0'
        },
      },
      originalPrice: {
        type: String,
        default() {
          return '0'
        },
      },
      buyNum: {
        type: String,
        default() {
          return '0'
        },
      },
      timeStart: {
        type: String,
        default() {
          return '0'
        },
      },
      timeEnd: {
        type: String,
        default() {
          return '0'
        },
      },
    },
  },
  filters: {
    appData(val, key) {
      if (val && val != '') {
        return val
      } else {
        return defaultData[key]
      }
    },
    appData_time(val, key) {
      if (val && val != '') {
        let date = new Date(val)
        let year = date.getFullYear() // 获取当前年份(2位)
        let month = date.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
        let day = date.getDate() // 获取当前日(1-31)
        //修改月份格式
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        //修改日期格式
        if (day >= 0 && day <= 9) {
          day = '0' + day
        }
        return year + '-' + month + '-' + day
      } else {
        return defaultData[key]
      }
    },
  },
  data() {
    return {
      header: require('./peer/header.png'),
      bar: require('./peer/bar.png'),
      time: require('./peer/time.png'),
      card_right: require('./peer/card_right.png'),
      prize: require('./peer/prize.png'),
      prize_bg: require('./peer/prize_bg.png'),
      active: require('./peer/active.png'),
      av: require('./peer/av.png'),
      add: require('./peer/add.png'),
      kong: require('./peer/kong.png'),
      address: require('./peer/address.png'),
      phone: require('./peer/phone.png'),
      detailImg: require('./peer/header.png'),
      prizList: [
        { url: require('./peer/av.png') },
        { url: require('./peer/add.png') },
      ],
    }
  },
  methods: {
    coverImgFilter(val, key) {
      if (val && val != '') {
        return this.getImgUrl(val)
      } else {
        return defaultData[key]
      }
    },
  },
}
</script>

<style scoped>
.peer-component {
  width: 375px;
  border: 1px solid #ccc;
  background: #fffefe;
  font-size: 14px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #b7edff, #caf2ff);
}
.peer-component .app-header {
  position: relative;
  width: 100%;
  height: 300px;
}
.peer-component .app-header .bar {
  width: 375px;
  height: 212px;
  position: absolute;
  left: 0;
  top: 0;
}
.peer-component .app-header .card {
  width: 100%;
  height: 110px;
  position: absolute;
  left: 0;
  top: 180px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 32px;
  background: linear-gradient(to right, #ffffff, #9dc3ee);
}
.app-header .card .left .title {
  margin: 12px 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
}
.app-header .card .left {
  width: 200px;
}
.app-header .card .right {
  position: relative;
  position: absolute;
  top: 0;
  right: 0;
}
.app-header .card .right .content {
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0, 50%);
  padding-right: 12px;
  box-sizing: border-box;
  margin-top: 10px;
  color: #237893;
}
.app-header .card .right .content .last-name {
  margin-bottom: 10px;
}
.app-header .card .right .content .last-time-item {
  background: #237893;
  padding: 6px 4px;
  margin: 0 4px;
  font-size: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #fff;
}

.time {
  width: 210px;
  position: relative;
}
.text {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
  color: #fff;
  padding: 2px 5px;
  box-sizing: border-box;
}
p {
  margin: 0px;
}
.app-content {
  padding: 0 16px;
  box-sizing: border-box;
}
.app-content .grounp .active_card {
  padding: 16px 12px;
  box-sizing: border-box;
  background: #fff !important;
  border-radius: 8px;
}
.app-content-title {
  font-size: 16px;
  color: #333333;
  font-weight: 700;
  display: inline-block;
  margin: 24px 0 16px;
}
.prize_list_item {
  border-radius: 8px;
  width: 108px;
  margin-right: 8px;
  box-sizing: border-box;
  background: #fff;
  display: inline-block;
  position: relative;
  border: 1px solid #fff;
  margin-bottom: 16px;
}
.prize_list_item .item-img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  width: 80px;
}
.prize_list_item .item-img-text {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  font-size: 8px;
  padding: 2px 4px;
  box-sizing: border-box;
  color: #fff;
}
.prize_list_item .prize_bg {
  padding: 10px;
  margin-top: 20px;
  box-sizing: border-box;
}
.prize_list_item .prize_name {
  text-align: center;
  font-size: 12px;
  color: #499cb6;
  padding-top: 10px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #b7edff, #caf2ff);
  line-height: 1.8em;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.active_card {
  position: relative;
}
.active_card .item-img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  font-size: 8px;
  color: #fff;
  height: 24px;
}
.active_card .item-img-text {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  font-size: 8px;
  padding: 4px;
  box-sizing: border-box;
  color: #fff;
}
.active_card_content {
  margin-top: 30px;
  border-radius: 54px;
  margin-right: 8px;
  box-sizing: border-box;
  background: #fff;
  display: inline-block;
  position: relative;
  border: 1px solid #fff;
  margin-bottom: 16px;
}

.active_list_item {
  display: inline-block;
  width: 54px;
  margin-right: 8px;
}
.prize .prize-content,
.prize-item-img {
  margin: 10px auto;
  vertical-align: middle;
  line-height: 40px;
  text-align: center;
  margin-right: 15px;
  color: #478ca3;
}
.address-content .name {
  font-size: 14px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 15px;
}
.address-content .address {
  font-size: 13px;
  color: #999999;
  margin-bottom: 20px;
}
.commodity-list-item-1 {
  margin-bottom: 8px;
}
.commodity-list-item-2 {
  font-size: 14px;
}
.vertical-center {
  text-align: right;
  position: relative;
  right: 0%;
  transform: translateY(50%);
  margin-bottom: 12px;
  margin-right: 16px;
}
.vertical-center {
  text-align: center;
  position: relative;
  right: 0%;
  transform: translateY(50%);
  margin-bottom: 12px;
}
.vertical-center-item-1 {
  margin-right: 24px;
}
.card_introduce {
  margin-bottom: 20px;
}
.card_introduce >>> img {
  width: 340px !important;
  margin: 0 auto;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.clear_margin {
  margin-right: 0px;
}
</style>
